<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="/echarts/echarts.js"></script>
<script src="/echarts/echarts-gl.js"></script>
</head>
<body style="margin: 0px; padding: 0px;">
	<div id="main"></div>
	<script type="text/javascript">
		var main = document.getElementById("main")
		var winheight = window.innerHeight;
		main.style.height = winheight + "px";
		var echart = echarts.init(document.getElementById("main"));
		var option = {
			backgroundColor : '#000',
			globe : {
				baseTexture : "/echarts/world/world-map.jpg",
				heightTexture : "/echarts/world/world-map.jpg",
				displacementScale : 0.04,
				shading : 'realistic',
				environment : '/echarts/world/background.jpg',
				realisticMaterial : {
					roughness : 0.9
				},
				postEffect : {
					enable : true
				},
				light : {
					main : {
						intensity : 5,
						shadow : true
					},
					ambientCubemap : {
						texture : '/echarts/world/pisa.hdr',
						diffuseIntensity : 0.2
					}
				}
			}
		};
		echart.setOption(option)
	</script>
</body>
</html>